<template>
  <div>
    <div class="header-name">
      <search :options="selectData" :msg="tacitly" @seek="collect" @hand="gettingData" />
      <el-button type="primary" class="btn" size="mini" @click="gettingData">{{ $t('btn.search') }}</el-button>
    </div>
    <jc-table
      class="tabMar"
      :table-data="tableData"
      :table-header="tableHeader"
      :table-height="tableHeight"
    >
      <template v-slot:billSlot="col">
        <el-image
          style="width: 30px; height: 30px"
          :src="$img + col.scope.row.fimg"
          :preview-src-list="[$img + col.scope.row.fimg]"
        />
      </template>
    </jc-table>
    <div class="footer">
      <jc-pagination
        :total="total"
        :page.sync="currentPage"
        :limit.sync="size"
        @pagination="gettingData"
      />
    </div>
  </div>
</template>

<script>
import search from '@/components/Search'
import searData from '@/components/Search/mixin'
import { queryPrdPlnPlan } from '@/api/homePage/business'

export default {
  components: {
    search
  },
  mixins: [searData],
  props: {
    tableHeight: {
      type: String,
      default: '300px'
    }
  },
  data() {
    return {
      ftype: 0,
      tableData: [],
      tableHeader: [
        { label: this.$t('market.paezText1'), prop: 'sal_khddh' },
        { label: '生产单号', prop: 'fbillno', width: '110' },
        { label: this.$t('market.placedate'), prop: 'fdate' },
        { label: '交付时间', prop: 'fdeliverydate' },
        { label: this.$t('shop.image'), type: 'bill', prop: 'fimg', width: '80' },
        { label: this.$t('market.fmodel'), prop: 'fmodel' },
        { label: this.$t('market.fmaterial'), prop: 'fnumber', width: '110' },
        { label: this.$t('shop.fname2'), prop: 'fname' },
        { label: this.$t('shop.fspecificaTion'), prop: 'fspecification' },
        { label: this.$t('market.fqty'), prop: 'fqty', width: '80' },
        { label: this.$t('market.workshop'), prop: 'fworkshop' },
        { label: this.$t('market.busineState'), prop: 'fstatus' },
        { label: this.$t('market.fdescripTion'), prop: 'fdescription', minWidth: '100' }
      ],
      currentPage: 1,
      size: 200,
      total: 0
    }
  },
  created() {
    this.gettingData()
  },
  methods: {
    // 生产在制订单
    gettingData() {
      const DATA = {
        pageNum: this.currentPage,
        pageSize: this.size,
        search: this.searCollData
      }
      queryPrdPlnPlan(DATA).then(res => {
        if (res.code === 0) {
          this.tableData = res.data.array
          this.total = res.data.total
        }
      })
    }
  }
}
</script>

<style scoped lang="scss">
.header-name {
  position: absolute;
  top: -6px;
  left: 100px;
  .btn {
    margin-left: 450px;
    transform: translateY(18%);
  }
}
.tabMar {
  margin-top: 10px;
}
</style>

